import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import api from './api'
import store from './dev/store/index'

createApp(App)
  .use(router)
  .use(store)
  .use({
    install(vue) {
      // 自动导入项目里的所有组件
      const components = require.context('./dev/', true, /\.vue$/)
      components.keys().forEach(i => {
        const component = components(i).default;
        if (component.name)
          vue.component(component.name, component);
      })

      // 有时需要DOM撑满屏幕，100vh在QQ浏览器底部有工具栏时会出现滚动条
      // window.innerHeight将不包含工具栏
      const resize = () => {
        const mobile = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i);
        if (mobile)
          document.body.setAttribute('mobile', '')
        else
          document.body.removeAttribute('mobile')

        vue.config.globalProperties.mobile = !!document.querySelector("body[mobile]")

        setTimeout(() => {
          document.body.style.setProperty("--width", document.body.clientWidth + "px");
          document.body.style.setProperty("--height", window.innerHeight - 1 + "px");
        }, 0)
      }
      resize();
      window.onresize = resize;

      vue.config.globalProperties.api = api;
    }
  })
  .mount('#app')
